<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue css动画</title>
    <style type="text/css" media="screen">
    /*这些动画样式可以提前定义好*/

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 2s;
    }
    </style>
    <script type="text/javascript" src="vue.js"></script>
</head>

<body>
    <!--
        v-if，v-show,还有动态组件控制组件显示和隐藏时，如果外层有transition标签，那么
        那么vue就会动态的给该dom动态的添加和删除类似上述的class类来起到过度的作用，从而起到动画的效果；
        -->
    <div class="app">
        <transition name='fade'>
            <div v-if="show">Hello world</div>
        </transition>
        <button @click="handelclick">切换</button>
    </div>
    <script type="text/javascript">
    var vm = new Vue({
        el: ".app",
        data: {
            show: true
        },
        methods: {
            handelclick: function() {
                this.show = !this.show
            }
        }
    });
    </script>
</body>

</html>